<template>
  <div class="about-page">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h2>关于我</h2>
        </div>
      </template>

      <div class="content">
        <div class="avatar-wrapper">
          <el-avatar 
            :size="100" 
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            class="hover-scale"
          />
          <div class="decoration-circle"></div>
        </div>

        <div class="info">
          <h3 class="bounce-in">学生开发者</h3>
          <p class="slide-in-item">📚 软件工程专业</p>
          <p class="slide-in-item">💻 热爱开发技术</p>
          <p class="slide-in-item">🌱 QQ:2090907466</p>
          <a 
            href="http://134.175.177.137:80/admin"
            class="magic-link"
          >
            🌱 神秘后台
          </a>
        </div>

        <el-divider class="custom-divider" />

        <div class="contact">
          <h4>联系方式</h4>
          <div class="contact-items">
            <el-tooltip
              content="发送邮件"
              placement="top"
              effect="light"
            >
              <el-button 
                type="primary" 
                :icon="Message" 
                circle 
                class="social-btn"
                @click="handleEmailClick"
              />
            </el-tooltip>
            
            <el-tooltip
              content="访问博客"
              placement="top"
              effect="light"
            >
              <el-button 
                type="success" 
                :icon="Link" 
                circle 
                class="social-btn"
                @click="openLink('http://134.175.177.137/')"
              />
            </el-tooltip>

            <el-tooltip
              content="gitee"
              placement="top"
              effect="light"
            >
              <el-button 
                type="warning" 
                :icon="Star" 
                circle 
                class="social-btn"
                @click="openLink('https://gitee.com/wu-jialeya')"
              />
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { Message, Link, Star } from '@element-plus/icons-vue'

const handleEmailClick = () => {
  window.location.href = 'mailto:2090907466@qq.com'
}

const openLink = (url) => {
  window.open(url, '_blank')
}
</script>

<style lang="scss" scoped>
.about-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .profile-card {
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }

    :deep(.el-card__header) {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-bottom: none;
      
      h2 {
        color: #2c3e50;
        font-size: 1.8rem;
        margin: 0;
        text-align: center;
        letter-spacing: 1px;
      }
    }

    .content {
      text-align: center;
      padding: 2rem;

      .avatar-wrapper {
        position: relative;
        display: inline-block;
        margin-bottom: 1.5rem;

        .hover-scale {
          transition: transform 0.3s ease;
          cursor: pointer;

          &:hover {
            transform: scale(1.1);
          }
        }

        .decoration-circle {
          position: absolute;
          width: 110%;
          height: 110%;
          border: 2px solid #e9ecef;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
          animation: pulse 2s infinite;
        }
      }

      .info {
        margin: 2rem 0;

        h3 {
          margin: 1rem 0;
          color: #2c3e50;
          font-size: 1.5rem;
          opacity: 0;
          animation: bounceIn 0.6s ease forwards;
        }

        p {
          color: #666;
          margin: 1rem 0;
          opacity: 0;
          transform: translateY(20px);
          animation: slideIn 0.5s ease forwards;

          @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              animation-delay: 0.2s * $i;
            }
          }
        }

        .magic-link {
          display: inline-block;
          color: #3498db;
          text-decoration: none;
          padding: 0.3rem 0;
          position: relative;
          transition: color 0.3s ease;

          &::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: #3498db;
            transition: width 0.3s ease;
          }

          &:hover {
            color: #2980b9;

            &::after {
              width: 100%;
            }
          }
        }
      }

      .custom-divider {
        margin: 2rem 0;
        background-color: #e9ecef;
      }

      .contact {
        h4 {
          color: #7f8c8d;
          margin-bottom: 1.5rem;
          font-weight: 500;
        }

        .contact-items {
          display: flex;
          justify-content: center;
          gap: 1.5rem;

          .social-btn {
            transition: all 0.3s ease;
            width: 48px;
            height: 48px;
            font-size: 1.2rem;

            &:hover {
              transform: scale(1.1) rotate(8deg);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            &:active {
              transform: scale(0.95);
            }
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 0.2; }
  100% { opacity: 0.4; }
}

@keyframes bounceIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .about-page {
    padding: 1rem;

    .profile-card {
      :deep(.el-card__header) h2 {
        font-size: 1.5rem;
      }

      .content {
        padding: 1.5rem;

        .social-btn {
          width: 42px;
          height: 42px;
        }
      }
    }
  }
}
</style>